<template>
  <div class="">
    <PageTitle :title="pageTitle"></PageTitle>
    <div class="form-wrapper">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="hdname">
          <el-input v-model="ruleForm.hdname" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="充值金额" prop="price">
          <el-input v-model="ruleForm.price" type="number" placeholder="请输入充值金额">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="充值后金额" prop="bl">
          <el-input v-model="ruleForm.bl" type="number" placeholder="请输入充值后金额">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import _ from 'lodash'
  import PageTitle from '@/components/pageTitle/PageTitle.vue'
  export default {
    name: 'RechargeDetail',
    components: {
      PageTitle,
    },
    activated() {
      this.$goTop()
      if (this.$route.params.id != 'none') {
        this._get()
      }
    },
    deactivated() {
      this.$destroy()
    },
    data() {
      return {
        ruleForm: {
          hdname: '',
          price: '',
          bl: '',
        },
        rules: {
          hdname: [
            { required: true, message: '请输入活动名称', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入充值金额', trigger: 'blur' },
            {
              validator(rule, value, callback) {
                const boolean = new RegExp(/^([1-9]\d{0,8}|0)(\.\d{1,2})?$/).test(value)
                if(!boolean) {
                  return callback(new Error('请正确输入充值金额'))
                }
                return callback()
              },
              trigger: 'blur'
            }
          ],
          bl: [
            { required: true, message: '请输入充值后金额', trigger: 'blur' },
            {
              validator: (rule, value, callback) => {
                const boolean = new RegExp(/^([1-9]\d{0,8}|0)(\.\d{1,2})?$/).test(value)
                if(!boolean) {
                  return callback(new Error('请正确输入充值后金额'))
                }
                if(Number(this.ruleForm.bl) < Number(this.ruleForm.price)) {
                  return callback(new Error('充值后金额不能小于充值金额'))
                }
                return callback()
              },
              trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {
      pageTitle() {
        return this.$route.params.id == 'none' ? '添加充值金额' : '充值金额详情'
      },
      submitUrl() {
        return this.$route.params.id == 'none' ? this.$api + '/v1/hd/discount' : this.$api + '/v1/hd/modify'
      }
    },
    methods: {
      // 重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      // 如果是编辑页，请求数据的函数
      async _get() {
        let { data: { code, data } } = await this.$axios({
          url: this.$api + '/v1/hd/details',
          method: 'GET',
          params: {
            id: this.$route.params.id
          }
        })
        if (code === 0) {
          this.ruleForm.hdname = data.hdname
          this.ruleForm.price = data.price
          this.ruleForm.bl = data.bl
        }
      },
      // 提交表单
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (!valid) {
            return false
          } else {
            this._submit()
          }
        })
      },
      _submit: _.throttle(async function() {
        let { data: { code, data } } = await this.$axios({
          url: this.submitUrl,
          method: 'POST',
          data:{
            hdname: this.ruleForm.hdname,
            price: this.ruleForm.price,
            bl: this.ruleForm.bl,
            id: this.$route.params.id
          }
        })
        if(code == 0) {
          this.$message.success(data)
          setTimeout(() => {
            this.$router.go(-1)
          }, 1500)
        }
      }, 2000, {trailing: false})
    }
  }
</script>

<style lang='scss'>
  .form-wrapper {
    width:50%;
  }
</style>
